<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/documentMyReady.js"></script>
    <style>
        .wrap{
            margin: 50px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrap .select-start, .wrap .select-end{
            width: 100px;
            height: 200px;
            font-size: 20px;
        }
        .wrap .select-start option, .wrap .select-end option{
            margin: 12px auto;
            text-align: center;
        }
        .wrap div.btn-group{
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 200px;
        }
        .wrap div.btn-group button{
            margin: 5px 20px;
        }
    </style>
    <script>
        document.myReady(function(){
            var selectStartEle = document.getElementsByClassName('select-start')[0];
            var selectEndEle = document.getElementsByClassName('select-end')[0];
            var buttonGroup = document.getElementsByClassName('btn-group')[0];
            //左边的要移到右边去
            //写一个函数
            //第一个参数 为 状态，是否全部移动
            //第二个参数 为 开始移动的DOM
            //第三个参数 为 最终移动的DOM
            var newChangeValue = function(state,start,end){
                //获取移动的元素DOM
                let opt = [];
                //定义字符串拼接的数组接收，提高性能
                let strArr = [];
                //判断是否为全部移动，获取需要移动的值
                for(let i = 0; i < start.length; i ++){
                    if(state || start.options[i].selected){
                        opt.push(start[i]);
                    }                       
                }
                for(let i = 0; i < opt.length; i ++){
                    //增加按钮到数组
                    strArr.push(`<option value = '${ opt[i].value }'>${ opt[i].text }</option>`);
                    //删除按钮
                    start.removeChild(opt[i]);
                }
                //添加到对象select
                end.innerHTML = end.innerHTML + strArr.join('');
            }

        //给buttongroup添加监听通过冒泡来选择哪一个按钮
            buttonGroup.addEventListener('click',function(e){
                //如果点击div本身的话，则return false
                let target = e.target;
                if(target == this){
                    console.log(this);
                    return;
                }
                let dir = target.getAttribute('dir');
                switch(dir){
                    case('button1'):{                    
                        newChangeValue(false,selectStartEle,selectEndEle);
                        break;
                    }
                    case('button2'):{                   
                        newChangeValue(true,selectStartEle,selectEndEle);
                        break;
                    }
                    case('button3'):{                    
                        newChangeValue(false,selectEndEle,selectStartEle);
                        break;
                    }
                    case('button4'):{                     
                        newChangeValue(true,selectEndEle,selectStartEle);
                        break;
                    }
                    default:{
                        console.log('something goes wrong');
                    }
                }
            },false)
        });
    </script>
</head>
<body>
    <h1 style="text-align:center">权限选择(按住ctrl多选)</h1>
    <div class="wrap">
        <select class="select-start" name="select" multiple="multiple">
            <option value="value1">value1</option>
            <option value="value2">value2</option>
            <option value="value3">value3</option>
            <option value="value4">value4</option>
            <option value="value5">value5</option>
        </select>
        <div class="btn-group">
            <button class="button1" dir="button1">＞</button>
            <button class="button2" dir="button2">＞＞</button>
            <button class="button3" dir="button3">＜</button>
            <button class="button4" dir="button4">＜＜</button>
        </div>
        <select name="" class="select-end" multiple="multiple">
            
        </select>
    </div>
    
</body>
</html>